<template>
  <div class="h100 statisticsOutlinePage">
    <!-- 全局统计 -->
    <div class="outlineGlobalStatistics">
      <h2 class="title18">{{ $t('qjtj') }}</h2>
      <div class="outlineGlobalStatisticsCont borderWithRadius">
        <full-parent-dom-with-dask :loading="loadingGlobalStatistics" class="h100"></full-parent-dom-with-dask>
        <div class="h100 globalTjRow">
          <div v-for="(item) in globalTjKeys" :key="item.id" class="h100 globalTjItem">
            <p>{{ item.title }}
              <question-mark-tip :tip-title="item.tip" :popupContainer="getPopupContainer">
              </question-mark-tip>
            </p>
            <p class="globalTjItemNumber">
              <table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.value"></table-ellipsis>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 关键指标统计 -->
    <div class="outlineKeyFingerStatistics">
      <div class="outlineKeyFingerStatisticsTop">
        <h3 class="title18">{{ $t('gjzb') }}</h3>
        <common-select
          :options="timeTypeOptions"
          :loading="false"
          :default-value="queryParams.timeType"
          :allow-clear="false"
          @changeoption="changeTimeType"
          style="width:120px;"
        ></common-select>
      </div>
      <div class="outlineKeyFingerStatisticsCont">
        <a-row :gutter="[20, 20]">
          <a-col :span="12" v-for="key in fingerKeys" :key="key">
            <div class="outlineKeyFingerItem borderWithRadius">
              <bar-echart :finger-key="key"></bar-echart>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script>
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import BarEchart from './comonents/BarEchart.vue'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { mapState } from 'vuex'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import statisticsApi from '@/api/modules/statistics'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
export default {
  components: {
    CommonSelect,
    BarEchart,
    FullParentDomWithDask,
    TableEllipsis,
    QuestionMarkTip
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.statisticsOutline.queryParams
    })
  },
  data () {
    return {
      // 全局统计的要素
      globalTjKeys: [{
        id: 'upgradeVehicles',
        title: this.$t('sjcc'),
        value: 0,
        tip: this.$t('sjccTip')
      }, {
        id: 'upgradeVersions',
        title: this.$t('vehicleVersion'),
        value: 0,
        tip: this.$t('vehicleVersionTip')
      }, {
        id: 'upgradeTasks',
        title: this.$t('upgradeTask'),
        value: 0,
        tip: this.$t('upgradeTaskTip')
      }, {
        id: 'conditionStrategyCount',
        title: this.$t('tjcl'),
        value: 0,
        tip: this.$t('tjclTip')
      }, {
        id: 'upgradeStrategyCount',
        title: this.$t('sjcl'),
        value: 0,
        tip: this.$t('sjclTip')
      }, {
        id: 'upgradeFiles',
        title: this.$t('sjwj'),
        value: 0,
        tip: this.$t('sjwjTip')
      }],
      // 按月按周统计
      timeTypeOptions: [{
        id: 2,
        name: this.$t('byWeek')
      }, {
        id: 1,
        name: this.$t('monthly')
      }],
      // 指标统计的类型key
      fingerKeys: ['sjccs', 'xjljs', 'xjbbs', 'xjrws'],
      loadingGlobalStatistics: false,
      tip: this.$t('loadDataTip').replace('____CONTENT__', this.$t('qjtj'))
    }
  },
  created () {
    this.getGlobalTjData()
  },
  methods: {
    getPopupContainer (node) {
      return node.parentNode.parentNode
    },
    getGlobalTjData () {
      this.loadingGlobalStatistics = true
      statisticsApi.getGlobalSummaryData({ taskType: this.queryParams.taskType }).then(res => {
        const { data } = res
        this.globalTjKeys.forEach(item => {
          if (data[item.id]) {
            // eslint-disable-next-line no-param-reassign
            item.value = data[item.id]
          }
        })
      }).finally(() => {
        this.loadingGlobalStatistics = false
      })
    },
    changeTimeType (val) {
      this.queryParams.timeType = val
    }
  },
  beforeDestroy () {
    this.$store.commit('resetStatisticsOutlineQueryParams')
  }
}
</script>
<style lang="less" scoped>
@border: 1px solid @borderColor;
.borderWithRadius {
    border: @border;
    border-radius: @border-radius-base;
}
.statisticsOutlinePage {
    padding:32px 24px;
    overflow-y: auto;
    .outlineGlobalStatisticsCont {
        min-height: 105px;
        margin-top: 10px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        .globalTjRow {
          display: flex;
        }
        .globalTjItem {
           flex:1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: left;
            padding:0 15px;
        }
        .globalTjItemNumber {
            font-size: 28px;
            color:#5E5E5E;
            white-space: nowrap;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .outlineKeyFingerStatisticsTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .outlineKeyFingerItem {
        height: 289px;
        margin-top: 10px;
    }
}
</style>
